<template>
  <div class="app-container">
    <div class="add-container">
      <el-button type="primary" @click="addButton">新增成员</el-button>
    </div>
    <!-- 项目成员列表 -->
    <el-table
      :data="list"
      border
      fit
      highlight-current-row
    >
      <el-table-column label="序号" min-width="30%" align="center">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column label="用户名" min-width="40%" align="center">
        <template slot-scope="scope">
          {{ scope.row.uid }}
        </template>
      </el-table-column>
      <el-table-column label="姓名" min-width="40%" align="center">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="30%" align="center">
        <template slot-scope="scope">
          <el-button type="success" size="medium" @click="handleDeleteParticipant(scope.row.uid)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加项目成员对话框 -->
    <el-dialog title="添加项目成员" :visible.sync="dialogAddForm">
      <el-form
        ref="postForm"
        :model="postForm"
        :rules="rules"
      >
        <el-form-item label="用户名:" label-width="80px" style="width: 85%" prop="uid">
          <el-input v-model="postForm.uid" type="text" />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button
          type="primary"
          style="width: 100px"
          @click="handleAddParticipants"
        >
          添加
        </el-button>
        <el-button @click="resetContent('postForm')">
          取消
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { addParticipant, getParticipant, deleteParticipate } from '@/api/project'

export default {
  name: 'Participant',
  data() {
    return {
      list: null,
      dialogAddForm: false,
      postForm: {
        uid: '',
        projid: window.localStorage.getItem('id')
      },
      rules: {
        uid: [{ required: true, trigger: 'blur', message: '用户名不能为空' }]
      }
    }
  },
  created() {
    const projid1 = window.localStorage.getItem('id')
    this.fetchData(projid1)
  },
  methods: {
    fetchData(id) {
      getParticipant(id).then(res => {
        this.list = res.data
        // window.localStorage.removeItem('id')
      })
    },
    handleAddParticipants() {
      addParticipant(this.postForm).then(res => {
        if (res.code === 200) {
          this.$message({
            message: '添加用户成功',
            type: 'success'
          })
          this.$router.push({ name: 'Participants', params: { id: this.postForm.projid }})
          this.dialogAddForm = false
        } else {
          this.$message.error(res.msg)
        }
        // this.fetchData(this.postForm.projid)
        this.$router.go(0)
      })
    },
    handleDeleteParticipant(uid) {
      this.postForm.uid = uid
      deleteParticipate(this.postForm).then(res => {
        if (res.code === 200) {
          this.$message({
            message: '删除项目成员成功',
            type: 'success'
          })
        } else {
          this.$message.error(res.msg)
        }
        // this.fetchData(this.postForm.projid)
        this.$router.go(0)
      })
    },
    addButton() {
      this.dialogAddForm = true
      this.uid = ''
    },
    resetContent(postForm) {
      this.dialogAddForm = false
      this.$refs[postForm].resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>
.add-container {
  margin: 20px;
}
</style>
